@extends('frontend.layouts.master')

@section('after-styles-end')
    {!! Html::style('css/plugin/percentagebar/style_percentage_bar.css') !!}
    {!! Html::style('css/frontend/frontend.css') !!}

@stop

@section('content')
    <div class="row" style="height: 50px;">

    </div>
    <div class="row">

        <div class="panel panel-default" id="subject_row">
            <div class="panel-heading">
                <div class="fa subject-title"
                     style="font-size: larger;font-weight: bold;">
                </div>
                <div style="display: none">
                    <div style="display: inline;" id="views">浏览:</div>
                    <div style="display: inline;" id="votes">投票:</div>
                </div>
            </div>

            <div class="panel-body">
            </div>
        </div><!-- panel -->

        <div class="btn-group" id="next-btn" style="display: none;">
            <button type="button" class="btn btn-default" onclick="nextSubject()">
                下一个
            </button>
        </div>

    </div><!--row-->

@endsection

@section('after-scripts-end')
    <script>
        var nextPageIndex = 1;
        var voteSubject = {};
        $(document).ready(new function () {
            nextSubject();
        });


        function selectChoice(ele) {
            var totalVotes = $(ele).attr("total-votes");
            var votes = $(ele).attr("votes");
            totalVotes++;
            votes++;
            $(ele).attr("total-votes", totalVotes);
            $(ele).attr("votes", votes);
            $("#subject_row")
                    .find(".choice-root")
                    .each(function (index, choiceEle) {
                        $(choiceEle).attr("total-votes", totalVotes);
                        var percent = Math.round($(choiceEle).attr("votes") * 100 / totalVotes) + "%";
                        $(choiceEle).attr('data-percent', percent);
                        $(choiceEle).find(".choice-percent").text(percent);
                        $(choiceEle).find(".choice-percent-hide").removeClass("choice-percent-hide");
                        $(choiceEle).find('.skillbar-bar').animate({
                            width: $(choiceEle).attr('data-percent')
                        }, 1000);
                    });
            $("#next-btn").show();
        }

        function nextSubject() {
            $.ajax({
                url: "{!! route('frontend.nextSubject') !!}?page=" + nextPageIndex,
                type: "get",
                traditional: true,
                dataType: "JSON",
                success: function (data) {
                    if (data.id) {
                        nextPageIndex++;
                        fillData(data);
                    } else {
                        var nextBtn = $("#next-btn");
                        nextBtn.html("后面没有了");
                        nextBtn.show();
                    }
                },
                error: function (xhr, type) {
                    alert('操作失败')
                }
            });
        }

        function fillData(data) {
            $(".subject-title").text(data.page + "." + data.title);
            $("#views").text("浏览:" + data.views);
            $("#votes").text("投票:" + data.total);
            if (data.choices) {
                $(".panel-body").empty();
                for (index in data.choices) {
                    var choice = data.choices[index];
                    $(".panel-body").append($('<div class="skillbar clearfix choice-root"' +
                            'id="' + data.id + '_' + index + '"' +
                            'subject-id="' + data.id + '"' +
                            'total-votes="' + data.total + '"' +
                            'votes="' + choice.votes + '"' +
                            'onclick="selectChoice(this)"' +
                            'data-percent="' + (data.total > 0 ? Math.round(choice.votes * 100/ data.total) : 0) + '%">' +
                            '<div class="skillbar-title choice-title">' +
                            '<span>' + choice.title + '</span>' +
                            '</div>' +
                            '<div class="skillbar-bar choice-progress"></div>' +
                            '<div class="skill-bar-percent choice-percent choice-percent-hide">' +
                            (data.total > 0 ? Math.round(choice.votes * 100/ data.total) : 0) + '%' +
                            '</div>' +
                            '</div>'));
                }
            }
        }

    </script>
@stop